<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">
        <style>
            .ui-state-highlight.ui-selected {
                color: blueviolet;
            }
            .ui-commandButton-wizard-selected{
                background-color: #D20005;
                font-weight: bold;
                color: #000000;
            }
            .ui-commandButton-wizard-unselected{
                background-color: #D20005;
                font-weight: bold;
                color: #AFAFAF;
            }
        </style>
        <h:form id="supplierPaymentRecordForm" style="font-size: 85%">
            <h2>Create Supplier Payment Record</h2>
            <br/>
            <p:panel>
                <p:messages />
                <br/>
                <br/>
                <h:panelGrid columns="8" cellpadding="10">
                    <h:outputLabel style="font-weight: bold" value="Invoice ID: "/>
                    <h:inputText id="invoiceId" value="#{sprManagerBean.spr.supplierInvoice.supplierInvoiceNo}" required="true" requiredMessage="Invoice must be selected"/>
                    <p:commandButton oncomplete="siDialog.show()" image="ui-icon ui-icon-search"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputLabel style="font-weight: bold" value="Payment Record ID: "/>
                    <h:outputText value="#{sprManagerBean.spr.supplierPaymentRecordId}"/>

                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                    <h:outputLabel style="font-weight: bold" value="Payment Record Date: "/>
                    <h:outputText value="#{sprManagerBean.spr.supplierPaymentDate}">
                        <f:convertDateTime pattern="MMMM dd, yyyy"/>
                    </h:outputText>
                </h:panelGrid>

                <br/>
                <br/>
                <br/>

                <h:outputText value="Payment Details" style="font-weight: bold; font-size: 110%"/>
                <p:separator/> 
                <br/>
                <h:panelGrid columns="4" cellpadding="10">
                    <h:outputLabel style="font-weight: bold" value="Payment Method: "/>
                    <h:selectOneMenu value="#{sprManagerBean.spr.paymentMethod}">
                        <f:selectItem itemLabel="-- Select One --" itemValue=""/>
                        <f:selectItem itemLabel="Cash" itemValue="Cash"/>
                        <f:selectItem itemLabel="Cheque" itemValue="Cheque"/>
                        <f:selectItem itemLabel="Credit Card" itemValue="Credit Card"/>
                        <f:selectItem itemLabel="PayPal" itemValue="PayPal"/>
                        <p:ajax update="supplierPaymentRecordForm:reference"/>
                    </h:selectOneMenu>
                    <h:panelGroup id="reference">
                        <h:outputLabel style="font-weight: bold" value="Cheque Reference Number: " rendered="#{sprManagerBean.spr.paymentMethod == 'Cheque'}"/>
                        <h:outputLabel style="font-weight: bold" value="Credit Card Number: " rendered="#{sprManagerBean.spr.paymentMethod == 'Credit Card'}"/>
                        <h:outputLabel style="font-weight: bold" value="PayPal Transaction Number: " rendered="#{sprManagerBean.spr.paymentMethod == 'PayPal'}"/>
                        <p:inputText value="#{sprManagerBean.spr.paymentReference}" rendered="#{!(sprManagerBean.spr.paymentMethod == 'Cash' || sprManagerBean.spr.paymentMethod == '' || sprManagerBean.spr.paymentMethod == null)}"/>
                    </h:panelGroup>
                    <h:outputText value=""/>
                    <h:outputLabel style="font-weight: bold" value="Amount: "/>
                    <p:inputText value="#{sprManagerBean.spr.paymentAmount}" required="true" requiredMessage="Amount cannot be empty">
                        <p:ajax update="supplierPaymentRecordForm:amountPaid"/>
                    </p:inputText>
                </h:panelGrid>

                <br/>
                <br/>
                <p:separator style="height:1px; border-color: #000000; color: #000000; background-color: #000000; outline-color: #000000"/> 
                <br/>
                <h2>
                    <h:panelGrid  columns="2" cellpadding="10">
                        <h:outputLabel style="font-weight: bold" value="Amount Due: "/>
                        <h:outputText id="amountDue" value="#{sprManagerBean.spr.supplierInvoice.invoiceAmount}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                        <h:outputLabel style="font-weight: bold" value="Amount Paid: "/>
                        <h:outputText id="amountPaid" value="#{sprManagerBean.spr.paymentAmount}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </h:panelGrid>
                </h2>
                <br/>
            </p:panel>
            <br/>
            <br/>
            <br/>
            <div align="right">
                <p:commandButton value="Create Supplier Payment Record" update="supplierPaymentRecordForm" action="#{sprManagerBean.createSupplierPaymentRecord()}" image="ui-icon ui-icon-disk"/>
            </div>
            <br/>
            <br/>
            <br/>
        </h:form>

        <p:dialog header="Search Supplier Invoice" widgetVar="siDialog" hideEffect="explode" height="600" width="800">    
            <h:form id="searchSupplierInvoiceForm">
                <p:dataTable var="si" value="#{sprManagerBean.allUnpaidSupplierInvoice}"
                             emptyMessage="No Sales Invoice found with given criteria" selection="#{sprManagerBean.spr.supplierInvoice}" selectionMode="single" widgetVar="sotbl">

                    <p:column filterBy="#{si.supplierInvoiceNo}" 
                              headerText="Supplier Invoice Id">
                        <h:outputText value="#{si.supplierInvoiceNo}" />
                    </p:column>
                    
                </p:dataTable>
                <p:commandButton value="Select Supplier Invoice" update="supplierPaymentRecordForm:invoiceId supplierPaymentRecordForm:amountDue" oncomplete="siDialog.hide()"/>
            </h:form>
        </p:dialog>

    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
